<template>
	<div>
		<el-dialog
			title="处置"
			:visible.sync="dialogVisible"
			width="70%"
			:before-close="handleClose"
			:close-on-click-modal="false"
		>
			<el-form ref="form" label-width="auto">
				<el-row>
					<el-col :span="6">
						<el-form-item label="事件发生日期">
							{{ infoData.happenTime || "--" }}
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="事件名称">
							{{ infoData.eventName || "--" }}
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="预警详情">
							{{ infoData.tipDetails || "--" }}
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="告警照片">
							<el-image
								style="width: 100px; height: 100px; cursor: pointer;margin-top: 12px;"
								:src="infoData.picUrlRect"
								fit="cover"
								:preview-src-list="[infoData.picUrlRect]"
							></el-image>
						</el-form-item>
					</el-col>
				</el-row>

				<el-row>
					<el-col :span="6">
						<el-form-item label="监控点名称">
							{{ infoData.name || "--" }}
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="许可证">
							{{ infoData.newlicenseno || "--" }}
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="单位名称">
							{{ infoData.unitname || "--" }}
						</el-form-item>
					</el-col>
				</el-row>
				<height />
				<height />
				<height />
				<height />
				<height />
				<el-row>
					<el-col :span="6">
						<el-form-item label="处置时间">
							<el-date-picker
								v-model="saveParams.handleTime"
								type="datetime"
								placeholder="选择日期时间"
								value-format="yyyy-MM-dd HH:mm:ss"
							>
							</el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="处置人">
							<el-input
								v-model="saveParams.handlePerson"
								placeholder="处置人"
								clearable
							></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="处置方法">
							<el-input
								v-model="saveParams.handleMethod"
								placeholder="处置方法"
								clearable
							></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<height />
				<height />
				<el-row>
					<el-col :span="24">
						<el-form-item label="处置照片">
							<el-upload
								action=""
								list-type="picture-card"
								accept="image/*"
								:http-request="beforeUpload"
								:file-list="fileList"
							>
								<i slot="default" class="el-icon-plus"></i>
								<div slot="file" slot-scope="{ file }">
									<img
										class="el-upload-list__item-thumbnail"
										:src="file.url"
										alt=""
									/>
									<span class="el-upload-list__item-actions">
										<span
											class="el-upload-list__item-preview"
											@click="
												handlePictureCardPreview(file)
											"
										>
											<i class="el-icon-zoom-in"></i>
										</span>
										<span
											class="el-upload-list__item-delete"
											@click="handleRemove(file)"
										>
											<i class="el-icon-delete"></i>
										</span>
									</span>
								</div>
							</el-upload>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>

			<span slot="footer" class="dialog-footer">
				<el-button @click="handleClose">取 消</el-button>
				<el-button type="success" @click="handleSave">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 预览图片dialog -->
		<el-dialog :visible.sync="imgDialogVisible">
			<img width="100%" :src="dialogImageUrl" alt="" />
		</el-dialog>
	</div>
</template>
<script>
import { handleVideoSnapped, uploadAPI } from "@/api/modules/home";
import axios from "axios";
export default {
	name: "",
	props: {},
	// 组件
	components: {},
	data() {
		return {
			dialogVisible: false,

			saveParams: {
				handleFileUrl: "", //处置照片链接，用';'号分隔
				handleMethod: "", //处置方式
				handlePerson: "", //处置人
				handleTime: "", //处置时间
				id: "", //主键唯一值
			},
			infoData: {},

			fileList: [],

			imgDialogVisible: false,
			dialogImageUrl: "",
		};
	},
	// 监听属性
	watch: {},
	// 计算属性
	computed: {},
	// 页面加载
	created() {},
	// 页面加载完成
	mounted() {},
	// 实例销毁之前
	beforeDestroy() {},
	// 实例销毁后
	destroyed() {},
	// 方法
	methods: {
		handleOpen(data) {
			this.infoData = data;
			this.saveParams.id = this.infoData.id;

			this.dialogVisible = true;
		},

		handleClose() {
			this.dialogVisible = false;

			this.saveParams = {
				handleFileUrl: "", //处置照片链接，用';'号分隔
				handleMethod: "", //处置方式
				handlePerson: "", //处置人
				handleTime: "", //处置时间
				id: "", //主键唯一值
			};

			this.fileList = [];
		},

		async handleSave() {
			try {
				if (!this.saveParams.handleTime) {
					this.$message.error("请选择处置时间");
					return;
				}
				if (!this.saveParams.handlePerson) {
					this.$message.error("请输入处置人");
					return;
				}
				if (!this.saveParams.handleMethod) {
					this.$message.error("请输入处置方式");
					return;
				}
				if (this.fileList.length === 0) {
					this.$message.error("请上传处置照片");
					return;
				}

				// console.log(this.saveParams);
				this.saveParams.handleFileUrl = this.fileList
					.map((item) => item.url)
					.join(";");

				const res = await handleVideoSnapped(this.saveParams);
				if (res.code === 200) {
					this.$message.success("保存成功！");
					this.handleClose();
					this.$emit("getList");
				} else {
					this.$message.error("保存失败：", res.msg);
				}
			} catch (error) {
				this.$message.error("保存失败：", error);
				console.log(error);
			}
		},

		beforeUpload(file) {
			const isSize3MB = file.file.size / 1024 / 1024 < 3;
			if (!isSize3MB) {
				this.$message({
					message: "上传文件大小不能超过3MB!",
					type: "error",
				});
				return;
			}
			this.uploadSectionFile(file);
		},

		async uploadSectionFile(files) {
			try {
				var formData = new FormData();
				formData.append("file", files.file);
				formData.append("id", "111");
				const instance = axios.create();
				const res = await instance({
					method: "POST",
					url: uploadAPI,
					// "http://sprcjg.scjgj.suzhou.com.cn:9005/rcjd-api/upload/pic",
					data: formData,
				});
				if (res.data.code == 200) {
					this.$message.success("文件上传成功！");
					this.fileList.push({
						name: res.data.msg,
						url: res.data.msg,
					});
				} else {
					this.handleRemove(files.file);
					this.$message.error("上传失败：", res.data.msg);
				}
			} catch (error) {
				this.$message.error("上传失败：", error);
				console.log(error);
			}
		},

		handleRemove(file) {
			this.fileList = this.fileList.filter((item) => {
				return file.url !== item.url;
			});
		},

		//
		handlePictureCardPreview(file) {
			this.dialogImageUrl = file.url;
			this.imgDialogVisible = true;
		},
	},
};
</script>
<style lang="scss" scoped></style>
